<template>
	<view class="preference">
		<view style="padding: 16rpx 24rpx">请选择自己偏好的带货类目</view>
		<uv-collapse v-if="dataList.length">
			<uv-collapse-item v-for="(item, index) in dataList" :key="index" :title="item.name" :disabled="disabled">
				<template #icon>
					<dx-icons v-if="item.isCheck" type="checkbox-filled" size="40rpx" color="#7F7FE9"
						@click.stop="handleAllChange(item, false)" />
					<dx-icons v-else type="circle" size="40rpx" color="#7F7FE9"
						@click.stop="handleAllChange(item, true)" />
				</template>
				<view class="content">
					<view v-for="row in item.childrenList" :key="row.cid" class="tag"
						:class="row.isCheck && 'is_active'" @click="handleChange(row, item)">{{ row.name }}</view>
				</view>
			</uv-collapse-item>
		</uv-collapse>
		<view v-else class="no-data">
			<image :src="base.JavaimgUrl + 'no-data.png'" />
			暂无数据
		</view>
		<view class="btns">
			<view class="cancel_btn" @click="handleReset">重置选项</view>
			<view class="comfig_btn" @click="handleSave">确认提交</view>
		</view>
	</view>
</template>

<script setup>
import base from '@/common/baseURL.js';
import api from '@/common/api.js';
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

onLoad(() => {
	getDataList();
});
const dataList = ref([]);
//获取类目消息
const getDataList = async () => {
	const res = await api.getCategoryList_API();
	if (res.code === 10000) {
		dataList.value = res.data;
		getCheckData();
	}
};
const checkData = ref();
//获取带货偏好
const getCheckData = async () => {
	const res = await api.getData_API();
	if (res.code === 10000) {
		checkData.value = res.data.categoryPreferenceList;
		setData(res.data.categoryPreferenceList);
	}
};
//设置默认选中
const setData = (data) => {
	dataList.value.forEach(item => {
		const obj = data.find(row => row.level1Cid === item.cid)
		if (obj) {
			item.childrenList.forEach(row => {
				const isSelect = obj.level2CidList.includes(row.cid)
				row = Object.assign(row, { isCheck: isSelect })
				return
			})
			item = Object.assign(item, { isCheck: !(obj.level2CidList.length < item.childrenList.length) })
		} else {
			handleAllChange(item, false)
		}
	})
};
const disabled = ref(false)
//全选
const handleAllChange = (item, isCheck) => {
	item = Object.assign(item, { isCheck: isCheck })
	item.childrenList.map(row => {
		row = Object.assign(row, { isCheck: isCheck })
	})

}
// 选择数据
const handleChange = (row, item) => {
	row = Object.assign(row, { isCheck: !row.isCheck })
	const isCheck = item.childrenList.every(chlid => chlid.isCheck)
	item = Object.assign(item, { isCheck })
}
//重置
const handleReset = () => {
	dataList.value.forEach(item => handleAllChange(item, false))
}
//确认
const handleSave = async () => {
	checkData.value = []
	dataList.value.forEach(item => {
		const arr = item.childrenList.filter(row1 => row1.isCheck).map(row => row.cid)
		if (arr.length > 0) {
			checkData.value.push({
				level1Cid: item.cid,
				level2CidList: arr
			})
		}
	})
	if (checkData.value.length > 5) {
		uni.showToast({
			title: '一级类目选择最多不能超过5个',
			icon: 'none',
		})
		return
	}
	//保存类目
	const res = await api.getSellpreferenceSave_API({ categoryPreferenceList: checkData.value })
	if (res.code === 10000) {
		getCheckData()
	}
}
</script>

<style scoped>
.preference {
	min-height: 100%;
	background-color: #f4f6f9;
	color: #7f7fe9;
	font-size: 22rpx;
	font-family: PingFang SC, PingFang SC;
	padding-bottom: 144rpx;
	box-sizing: border-box;
}

.item_title {
	display: flex;
	align-items: center;
	font-size: 30rpx;
	font-weight: 800;
	color: #333333;
	letter-spacing: 5rpx;
	padding: 24rpx;
	box-sizing: border-box;
}

.content {
	display: flex;
	flex-wrap: wrap;
	background: #f2f2f2;
	padding: 24rpx 24rpx 0;
}

.tag {
	background: rgba(153, 153, 153, 0.1);
	border-radius: 8rpx;
	border: 2rpx solid #999999;
	font-size: 24rpx;
	font-weight: 400;
	color: #999999;
	line-height: 32rpx;
	padding: 8rpx 40rpx;
	box-sizing: border-box;
	margin-right: 24rpx;
	margin-bottom: 24rpx;
}

.is_active {
	color: #7f7fe9;
	background: rgba(127, 127, 233, 0.2);
	border: 2rpx solid #7f7fe9;
}

.btns {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 120rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #fff;
	padding: 0 24rpx;
	font-size: 30rpx;
	text-align: center;
	line-height: 68rpx;
	box-sizing: border-box;
	letter-spacing: 5rpx;
}

.cancel_btn {
	width: 218rpx;
	height: 68rpx;
	color: #999;
	background: rgba(153, 153, 153, 0.3);
	border-radius: 16rpx;
}

.comfig_btn {
	width: 460rpx;
	height: 68rpx;
	color: #fff;
	background: #7f7fe9;
	border-radius: 16rpx;
}

.no-data {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 22rpx;
	color: #999;
	margin-top: 124rpx;
}

.no-data image {
	width: 540rpx;
	height: 510rpx;
	margin-bottom: 32rpx;
}
</style>
